<template>
  <div class="about-container">
    <el-main>
      <span class="safe_title">账号安全</span>
      <el-divider></el-divider>
      <div class="uesr_email">
        <span>邮箱</span><span ref="test1" v-show="!flag" style="margin:310px">{{userInfo.email}}</span><span v-show="flag" class="noEmail" style="margin:353px">暂无邮箱</span><el-button type="text" @click="centerDialogVisible = true" class="change_email">修改</el-button>
      </div>
      <el-divider></el-divider>
      <div class="user_password">
        <span>密码</span><span>*****</span><el-button type="text" @click="centerDialogVisible2 = true" class="change_password">修改</el-button>
      </div>
    </el-main>
    <el-dialog
      title="修改邮箱"
      :visible.sync="centerDialogVisible"
      :modal-append-to-body="false"
      width="500px"
      center>
      <el-form :model="numberValidateForm" ref="numberValidateForm" :rules="rules" label-width="100px" class="demo-ruleForm" hide-required-asterisk = "false">
        <el-form-item label="原邮箱">
          <el-input v-model="flag1" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item  prop="email_number" label="新邮箱">
          <el-input v-model="numberValidateForm.email_number" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item  prop="email_code">
          <el-input autocomplete="off" style="width:50%"></el-input><el-button style="background:rgb(255,165,0);color:white">发送验证码</el-button>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="Email('numberValidateForm');centerDialogVisible = false">确认修改</el-button>
          <el-button @click="resetForm('numberValidateForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      title="修改密码"
      :visible.sync="centerDialogVisible2"
      :modal-append-to-body="false"
      width="500px"
      center
      >
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="旧密码" prop="oldpass">
          <el-input type="password" v-model="ruleForm.oldpass" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="codePass">
          <el-input  v-model="ruleForm.codePass" autocomplete="off" placeholder="请输入验证码" style="width:200px;float:left;"></el-input>
          <div class="login-code" @click="refreshCode">
            <!--验证码组件-->
            <Sidentify :identifyCode="identifyCode" />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="password('ruleForm');centerDialogVisible2 = false">确认修改</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import Sidentify from '@/views/pageIn/mine/components/MeMessage/Sidentify.vue'
import { getUserProfile, updateEmail, updatePassword } from '@/utils/api/user.js'
export default {
  name: '',
  props: {},
  components: { Sidentify },
  data () {
    // 验证码输入控制
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('验证码不能为空'));
      } else if (value !== this.identifyCode && value !== '') {
        callback(new Error('验证码错误'));
      } callback();
    };
    var validatePass1 = (rules, value, callback) => {
      if (value === '') {
        callback(new Error("密码不能为空"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入的新密码不一样'));
      } callback();
    };
    return {
      identifyCodes: "1234567890",
      identifyCode: "",
      isShow: false,
      flag: false,
      flag1: "暂无邮箱",
      flag2: '',
      centerDialogVisible: false,
      centerDialogVisible2: false,
      numberValidateForm: {
        email_number: ''
      },
      ruleForm: {
        oldpass: '',
        pass: '',
        checkPass: '',
        codePass: '',
      },
      rules: {
        pass: [
          { required: true, message: "密码不能为空", trigger: blur },
          { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/, message: '密码由6-16位的字母和数字组成', trigger: 'blur' }
        ],
        checkPass: [
          { required: true, trigger: blur, validator: validatePass1 },
          { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/, message: '密码由6-16位的字母和数字组成', trigger: 'blur' }
        ],
        email_number: [
          { required: true, message: "邮箱不能为空", trigger: blur },
          { pattern: /([1-9]\d{7,10}@qq\.com)|(^[a-zA-Z]\w{5,17}@163.com)/, message: '邮箱只能是qq邮箱或者网易邮箱', trigger: 'blur' },
        ],
        email_code: [
          { required: true, message: "验证码不能为空", trigger: blur }
        ],
        codePass: [
          { validator: validatePass, trigger: 'blur' }
        ]
      },
      userInfo: [] // 存储个人信息
    };
  },
  created () {
    // 初始化个人信息
    this.loadProfile()
    // 初始化验证码
    this.refreshCode();
  },
  methods: {
    loadProfile () {
      getUserProfile().then(res => {
        this.userInfo = res.data.data;
        if (this.userInfo.email === null) {
          this.flag = true;
        } else {
          this.flag = false;
          this.flag1 = this.userInfo.email;
        }
        if (this.userInfo.password !== '') {
          this.flag2 = this.userInfo.password;
        }
      })
    },
    Email (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = {
            email: this.numberValidateForm.email_number
          }
          updateEmail(data).then(res => {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            // 初始化个人信息
            this.loadProfile()
          })
        } else {
          return false;
        }
      });
    },
    password (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.centerDialogVisible2 = false;
          const data = {
            oldPassword: this.ruleForm.oldpass,
            newPassword: this.ruleForm.pass
          }
          updatePassword(data).then(res => {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.reload()
          })
        } else {
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    // 验证码
    randomNum (min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode () {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode (o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
    }
  },
  mounted () {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
}
</script>

<style lang='less' scoped>
.about-container {
  height: 75%;
  margin-right: 20px;
  // background-color: orange;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  min-height: 344px;
  flex: 1;
  .safe_title{
    font-size: 18px;
  }
  .change_email,.change_password{
    position: fixed;
    right: 120px;
  }
  .change_email{
    top: 323px;
  }
  .change_password{
    top: 387px;
  }
  .user_password span{
    margin-right: 368px;
  }
}
/deep/.el-dialog{
  height: 420px;
  border-radius: 20px;
}
/deep/.el-input__inner{
  width: 76%;
  margin-left: 20px;
}
/deep/.el-button--primary{
  margin-left: 50px !important;
  background-color: rgb(255,165,0);
  border: rgb(255,165,0);
}
/deep/.el-button--default{
 background-color: white;
 color: black;
 border: black;
}
/deep/.el-button--default:hover{
  background-color: blanchedalmond;
  border: blanchedalmond;
  // color: rgb(66, 56, 56);
}
/deep/.el-button--default:active{
  border: blanchedalmond;
}
/deep/.el-dialog__header{
  padding-top: 45px;
}
/deep/.el-button--text{
  // position: fixed;
  // right: 120px;
  color: rgb(255,165,0);
}
/deep/.el-main{
  margin-bottom: 100px;
}
</style>
